<template>
  <div class="main-map-bg">
    <div id="driver-live-map" style="height:100%"></div>
  </div>
</template>


 <script type="text/javascript">
import BMap from "BMap";
import _global from "@/components/golbal";
import "echarts/map/js/china.js";
export default {
  name: "baiduMapDriverLive",
  data() {
    return {
      districtLoading: 0, //百度地图区域化个数
      blist: [], //百度地图遮罩集合
      deviceMarker: [], //用于存放旧的设备点的坐标，在请求之后，清除原来的点
      drivceLists: [],
      taskOfAddMarket: "", //任务
      appKey: "",
      styleJson: [
        {
          featureType: "water",
          elementType: "all",
          stylers: {
            color: "#0c0d22"
          }
        },
        {
          featureType: "land",
          elementType: "geometry",
          stylers: {
            color: "#000102"
          }
        },
        {
          featureType: "highway",
          elementType: "all",
          stylers: {
            visibility: "off"
          }
        },
        {
          featureType: "arterial",
          elementType: "geometry.fill",
          stylers: {
            color: "#000000"
          }
        },
        {
          featureType: "arterial",
          elementType: "geometry.stroke",
          stylers: {
            color: "#0b3d51"
          }
        },
        {
          featureType: "local",
          elementType: "geometry",
          stylers: {
            color: "#000000"
          }
        },
        {
          featureType: "railway",
          elementType: "geometry.fill",
          stylers: {
            color: "#000000"
          }
        },
        {
          featureType: "railway",
          elementType: "geometry.stroke",
          stylers: {
            color: "#08304b"
          }
        },
        {
          featureType: "subway",
          elementType: "geometry",
          stylers: {
            lightness: -70
          }
        },
        {
          featureType: "building",
          elementType: "geometry.fill",
          stylers: {
            color: "#000000"
          }
        },
        {
          featureType: "all",
          elementType: "labels.text.fill",
          stylers: {
            color: "#857f7f"
          }
        },
        {
          featureType: "all",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#000000"
          }
        },
        {
          featureType: "building",
          elementType: "geometry",
          stylers: {
            visibility: "off"
          }
        },
        {
          featureType: "green",
          elementType: "geometry",
          stylers: {
            color: "#062032"
          }
        },
        {
          featureType: "boundary",
          elementType: "all",
          stylers: {
            color: "#465b6c"
          }
        },
        {
          featureType: "manmade",
          elementType: "all",
          stylers: {
            color: "#022338"
          }
        },
        {
          featureType: "label",
          elementType: "all",
          stylers: {
            visibility: "off"
          }
        }
      ]
    };
  },
  props: {},
  created() {},
  watch: {},
  methods: {
    /* ***************初始化百度地圖begin**************   */
    initDriverLiveBaiduMap: function() {
      var map = new BMap.Map("driver-live-map", { enableMapClick: false });
       map.centerAndZoom(new BMap.Point(114.911564,32.118769), 10);
     // map.centerAndZoom("信阳市",10); 
      map.enableScrollWheelZoom();
      map.disableDoubleClickZoom(); //禁止双击缩放
      map.enableScrollWheelZoom(true);
      this.addDistrict("信阳");
      //渲染个性化百度地图
      addindividuation(map);

      window.DriverLiveBaiduMap = map; //将map变量储存在全局
    },
    addDistrict: function(districtName) {
      var _this = this;
      //使用计数器来控制加载过程
      _this.districtLoading++;
      var bdary = new BMap.Boundary();

      bdary.get(districtName, function(rs) {
        //获取行政区域
        var count = rs.boundaries.length; //行政区域的点有多少个
        if (count === 0) {
          alert("未能获取当前输入行政区域");
          return;
        }
        for (var i = 0; i < count; i++) {
          _this.blist.push({ points: rs.boundaries[i], name: districtName });
        }
        //加载完成区域点后计数器-1
        _this.districtLoading--;
        if (_this.districtLoading == 0) {
          //全加载完成后画端点
          _this.drawBoundary();
        }
      });
    },
    drawBoundary: function() {
      var _this = this;
      //包含所有区域的点数组
      var pointArray = [];

      /*画遮蔽层的相关方法
       *思路: 首先在中国地图最外画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并进来，并全部连到西北角。
       *      这样就做出了一个经过多次西北角的闭合多边形*/

      //定义中国东南西北端点，作为第一层
      var pNW = { lat: 59.0, lng: 73.0 };
      var pNE = { lat: 59.0, lng: 136.0 };
      var pSE = { lat: 3.0, lng: 136.0 };
      var pSW = { lat: 3.0, lng: 73.0 };
      //向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点
      var pArray = [];
      pArray.push(pNW);
      pArray.push(pSW);
      pArray.push(pSE);
      pArray.push(pNE);
      pArray.push(pNW);
      //循环添加各闭合区域
      for (var i = 0; i < this.blist.length; i++) {
        //添加显示用标签层
        var label = new BMap.Label(this.blist[i].name, {
          offset: new BMap.Size(20, -10)
        });
        label.hide();
        window.DriverLiveBaiduMap.addOverlay(label);

        //添加多边形层并显示
        var ply = new BMap.Polygon(this.blist[i].points, {
          strokeWeight: 3,
          strokeColor: "#5ac5ff",
          fillOpacity: 0.01,
          fillColor: " #FFFFFF"
        }); //建立多边形覆盖物
        /**
         * 各种鼠标事件绑定
         */
        function click(evt) {
          for (var i = 0; i < _this.deviceMarker.length; i++) {
            _this.deviceMarker[i].closeInfoWindow();
          }
        }
        function mouseover(evt) {}
        function mousemove(evt) {}
        function mouseout(evt) {}

        ply.name = this.blist[i].name;
        ply.label = label;
        ply.addEventListener("click", click);
        ply.addEventListener("mouseover", mouseover);
        ply.addEventListener("mouseout", mouseout);
        ply.addEventListener("mousemove", mousemove);
        window.DriverLiveBaiduMap.addOverlay(ply);

        //添加名称标签层
        //  var centerlabel = new BMap.Label(blist[i].name, { offset: new BMap.Size(0, 0) });
        // centerlabel.setPosition(ply.getBounds().getCenter());
        //  map.addOverlay(centerlabel);

        //将点增加到视野范围内
        var path = ply.getPath();
        pointArray = pointArray.concat(path);
        //将闭合区域加到遮蔽层上，每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点
        pArray = pArray.concat(path);
        pArray.push(pArray[0]);
      }

      //限定显示区域，需要引用api库
      var boundply = new BMap.Polygon(pointArray);
      // BMapLib.AreaRestriction.setBounds(map, boundply.getBounds());
      window.DriverLiveBaiduMap.setViewport(pointArray); //调整视野

      //添加遮蔽层
      var plyall = new BMap.Polygon(pArray, {
        strokeOpacity: 0.0000001,
        strokeColor: "#000000",
        strokeWeight: 0.00001,
        fillColor: "#ffffff",
        fillOpacity: 1
      }); //建立多边形覆盖物
      //  map.addOverlay(plyall);
    },

    /* ***************区域化百度地圖end**************   */

    /* ***************创建百度地图点的坐标加信息框begin**************   */
    createMarket: function(node, info_html) {
      var myIcon = new BMap.Icon(
        "static/img/icon_drivce_small.png",
        new BMap.Size(37, 45)
      );
      var marker = new BMap.Marker(new BMap.Point(node.lng, node.lat), {
        icon: myIcon
      });
      var opts = {
        width: 200, // 信息窗口宽度
        height: 100, // 信息窗口高度
        title: "<div>设备信息</div>", // 信息窗口标题
        enableMessage: true, //设置允许信息窗发送短息
        message: "设备信息message"
      };

      marker.addEventListener("mouseover", function(e) {
        var myIcon = new BMap.Icon(
          "static/img/icon_drivce_big.png",
          new BMap.Size(54, 67)
        );
        marker.setIcon(myIcon);
        //  this.openInfoWindow(new BMap.InfoWindow(info_html, opts));
      });
      marker.addEventListener("mouseout", function(e) {
        var myIcon = new BMap.Icon(
          "static/img/icon_drivce_small.png",
          new BMap.Size(37, 45)
        );
        marker.setIcon(myIcon);
        // this.closeInfoWindow();
      });

      marker.addEventListener("click", function(e) {
        this.openInfoWindow(new BMap.InfoWindow(info_html, opts));
      });
      return marker;
    },
    /* ***************创建百度地图点的坐标加信息框end**************   */
    //获取设备信息2
    getDiviceInfo: function() {
      var _this = this;
      $.ajax({
        url: _this.global.deviceQuery, //请求的url地址
        contentType: "application/json;charset=UTF-8",
        dataType: "json", //返回格式为json
        data: { appKey: _this.appKey }, //参数值
        async: false,
        type: "GET", //请求方式
        beforeSend: function() {
          //请求前的处理
        },
        success: function(req) {
          if (req.code == "200") {
            _this.drivceLists = req.data.records;
          }
        },
        complete: function() {},
        error: function() {
          //请求出错处理
        }
      });
    },

    routeChart: function(routeDeviceList) {
      var _this = this;

      $.ajax({
        url: _this.global.deviceQueryDetail, //请求的url地址
        // contentType: "application/json",
        //  dataType: "text", //返回格式为json
        data: { cellIdList: routeDeviceList.join(",") }, //参数值
        type: "POST", //请求方式
        beforeSend: function() {
          //请求前的处理
        },
        success: function(req) {
          //  data={"code":"200","data":[["114.92773121376118","32.00899744124072"],["114.92709246626973","32.009173497941475"],["114.92779129249581","32.012655393067874"],["114.92796608936995","32.009176219560885"],["114.92810311796515","32.00746721099835"],["114.92782131246707","32.01012755341066"],["114.92803488201595","32.00860963575922"],["114.9277306144304","32.01097562614972"],["114.92830848114343","32.0071497147291"],["114.9278822546087","32.009540758308155"],["114.92825591092574","32.00695789907072"],["114.92765370725955","32.013582756756534"],["114.92732008316733","32.01674221865974"],["114.92600485705862","32.01767474159483"],["114.92716784125443","32.01770957734831"],["114.92813363232257","32.00883611334522"],["114.92791988081186","32.01111297663099"],["114.92747129869547","32.015293098017"],["114.92135087783832","32.017716684934605"],["114.92815703970724","32.00766908260723"],["114.92864648447366","32.000795064186825"],["114.91954730199386","32.01768466322609"],["114.92888433846372","31.99834508737331"],["114.92173838760641","32.01546114966846"],["114.92313713632888","32.013276147575105"],["114.92601952007517","32.01323190301334"],["114.92503896550839","32.01325524790608"],["114.91526231680074","32.017866045477064"],["114.91870355150832","32.01768481701685"],["114.93560843229169","31.982829813863663"],["114.93788428609375","31.980667595992198"],["114.93293129614322","31.985319474580574"],["114.92906794616212","31.99639437522837"],["114.94299875073814","31.975219634079256"],["114.94079052126038","31.977874255013266"],["114.9291754758877","31.99538973732277"],["114.9302462878376","31.98776010727289"],["114.92958947030795","31.99096313018736"],["114.98250344902895","31.95274583278496"],["114.98669874223314","31.947981755149808"],["114.94490179625026","31.972902312115338"],["114.95579857110049","31.964051009457346"],["114.9887586097376","31.94538145858378"],["114.95341942474298","31.965909192936063"],["114.95798894047773","31.96256189518409"],["114.962234786447","31.961311394267714"],["114.9735938524878","31.95850044940257"],["114.99351494693988","31.938410108094537"],["115.00287031699379","31.929007539118142"],["114.99767696862655","31.922485799822816"],["114.99470219965589","31.918427246205173"],["114.99657518603293","31.921298368459446"],["114.99026362763455","31.91181237160734"],["114.98944945359536","31.94436989809661"],["114.98873833180903","31.90786504571101"],["114.99986568069087","31.93274383028746"],["114.99333833456141","31.880812255095297"],["115.00569770692444","31.860375649885384"],["114.99791114920133","31.868363545031382"],["114.9989511020757","31.867072540947447"],["115.01602111838108","31.845368330466872"],["115.01274191120953","31.84623431018949"],["115.01471535829047","31.84605429492333"],["114.99381634064801","31.87919279194702"],["115.010368580901","31.85647534130247"],["115.01708139972737","31.842930647085087"],["115.02327169074071","31.840840052478885"],["115.04093785286685","31.824743463916057"],["115.02551758871591","31.839005491604777"],["115.02396923219317","31.84040137658037"],["115.04079912809554","31.82373465693124"],["115.02118666128419","31.841357198272103"],["115.04112432067781","31.82006941944539"],["115.0189165472121","31.84181229187193"],["115.03957985993662","31.808510119719383"],["115.03705684946503","31.804816346866513"],["115.0376691700307","31.805707121866863"],["115.0339284834528","31.80090368551226"],["115.03640708500359","31.80390654854332"],["115.04201143065728","31.8138988663624"],["115.03447230240303","31.80163035451251"],["115.03740158602433","31.805409544627498"],["115.035259278321","31.80251059617464"],["115.04118555076546","31.832078823121936"],["115.04149744860258","31.829756767848576"],["115.04046848070558","31.833018670416184"],["115.03426154896687","31.835875313037977"],["115.04129103325286","31.81821973770019"],["115.03639306112733","31.83510428606244"],["115.03954204168528","31.808549575711115"],["115.04134330696512","31.827411643677113"],["115.04121282833746","31.826410530150017"],["115.01696674306334","31.843399254439035"],["115.01226148110267","31.853211161782752"],["115.00361084863773","31.8623824591518"],["115.01126763016853","31.855808511717658"],["115.02563209134382","31.83902463778825"],["115.02055063357514","31.84153066748177"],["115.01498418459826","31.84597230223182"],["115.01056082579852","31.85645648483402"],["115.01870123900783","31.84193290920078"],["114.99638589069212","31.870793932722965"],["114.99286840397762","31.882333660831566"],["114.98920247304771","31.895861127941075"],["114.98828079431641","31.899232016947277"],["114.98775828603448","31.901185891789236"],["114.9925672762537","31.883464515460567"],["114.99499747034224","31.87480320806361"],["114.98753676487357","31.904400232389882"],["114.98747475357672","31.90331006358282"],["114.99481449097108","31.937036774859706"],["115.00008142186346","31.932568526501363"],["114.9842785532916","31.950834033764757"],["114.99554428805395","31.93636380194227"],["114.99088709427848","31.94245763716983"],["114.9862072487153","31.948662770058316"],["114.98977900748204","31.910644129345382"],["114.99755387081585","31.92234283793843"],["114.99474860613145","31.91849180911362"],["114.96368646755614","31.960968388956225"],["114.94475715758004","31.973118532768012"],["114.95169584471556","31.967467810266353"],["114.94792509757903","31.970444332379003"],["114.94039433344317","31.978366515576713"],["114.95373124690909","31.96585033380833"],["114.93452848989249","31.98392760922186"],["114.95920951233106","31.962110127491126"],["114.98248032089812","31.952834037806394"],["114.92197095233193","32.000880148741075"],["114.92961122713557","31.991358092966614"],["114.92532407188212","32.00109891654688"],["114.92983501297228","31.98838360605328"],["114.923893105702","32.00435316119607"],["114.92515449949752","32.005377625834335"],["114.92408328587048","32.004412846890354"],["114.92133069526751","32.00320385277789"],["114.92145184861394","32.00402123343359"],["114.92788226162901","32.010406303159286"],["114.9277834700902","32.01127458882013"],["114.92818008815543","32.00683378271088"],["114.91656455661901","32.01776019724018"],["114.91518624048092","32.017706475604555"],["114.91557464683467","32.01779261343343"],["114.92771469884495","32.012105129295136"],["114.92669793234398","32.00534551808867"],["114.92816569559967","32.00535099070802"],["114.92137340235386","32.00800164895361"],["114.92167007667561","32.01740174626019"],["114.92171570564894","32.01667369794803"],["114.92152541204644","32.011084647388735"],["114.92145684169063","32.00978314092349"],["114.9215779838172","32.01328980066423"],["114.92109973308298","32.01753529649222"],["114.91665546144283","32.0176609224356"],["114.92065488766201","32.000718140954504"],["114.921132451038","32.002926337598296"],["114.92135170303581","32.00752046923946"],["114.92116272406341","32.00382338154545"],["114.9212753823064","32.00594417559175"],["114.92112609692538","32.00188341513802"],["114.92121587491079","32.00354143332882"],["114.92126963819638","32.00405255545854"],["114.92131391089289","32.00463625143625"],["114.92067490201593","32.02110742960243"],["114.92079656594251","32.021139846287895"],["114.92674293196279","32.02036515654888"],["114.92133631541702","32.00572009513305"],["114.92433242985632","32.020665196702446"],["114.92246963785227","32.02088003671295"],["114.9248576103071","32.02062109785726"],["114.92154060620392","32.00988321531639"],["114.92186033419468","32.017053726006765"],["114.92706096734365","32.013279994531274"],["114.92740357880766","32.01416951960345"],["114.92691696321836","32.019605066219754"],["114.92156282944924","32.01343066063732"],["114.91896941151174","32.01358587394478"],["114.9274484691427","32.01357211472979"],["114.92416361995383","32.01342005757493"],["114.92705419555725","32.0181694726904"],["114.92224800280574","32.01343471630788"],["114.91568124288042","32.01384329227886"],["114.91350308674613","32.0139642248072"],["114.91498752854142","32.01389090068007"],["114.9139820767792","32.01393349273325"],["114.91258144250453","32.015053506182625"],["114.918307046489","32.01363141116391"],["114.91259660764551","32.01513252922385"],["114.91256547045836","32.01483125137327"],["114.91274123454056","32.01518733117787"],["114.91686895149881","32.017735861264526"],["114.92036169776432","32.01759896279111"],["114.92151061418382","32.0175597510935"],["114.91363198707471","32.01385818277673"],["114.9193034047502","32.013509553062754"],["114.91312181239311","32.01389185749623"],["114.91769058203181","32.01360993148097"],["114.92171543790059","32.01470212546944"],["114.92166168076876","32.014220483687595"],["114.92013445721918","32.021135663191046"]],"success":true};
          var lineArr = [];
          if (req.code == "200") {
            for (var x = 0; x < req.data.data.length; x++) {
              if (req.data.data[x].length > 10) {
                lineArr.push(req.data.data[x]);
              }
            }
            // lineArr.push(req.data.data[0]);

            var hStep = 100 / (lineArr.length - 1);
            var busLines = lineArr.map(function(busLine, idx) {
              return {
                coords: busLine,
                lineStyle: {
                  normal: {
                    //   color: echarts.color.modifyHSL('#5A94DF')
                    color: echarts.color.modifyHSL(
                      "#5A94DF",
                      Math.round(hStep * idx)
                    ),
                    width: 0.5,
                    opacity: 0.1
                  }
                }
              };
            });

            var options = {
              animation: false,
              bmap: {
                center: ["114.0832947235837", "32.16857465070465"],
                zoom: 13,
                roam: true,
                mapStyle: {
                  styleJson: _this.styleJson
                }
              },
              series: [
                {
                  type: "lines",
                  coordinateSystem: "bmap",
                  polyline: true,
                  data: busLines,
                  silent: true,
                  lineStyle: {
                    normal: {
                      // color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx)),
                      // color: '#c23531',
                      // color: 'rgb(200, 35, 45)',
                      opacity: 0.1,
                      width: 1
                    }
                  },
                  progressiveThreshold: 500,
                  progressive: 2001
                },
                {
                  type: "lines",
                  coordinateSystem: "bmap",
                  polyline: true,
                  data: busLines,
                  lineStyle: {
                    normal: {
                      width: 0
                    }
                  },
                  effect: {
                    constantSpeed: 30,
                    show: true,
                    trailLength: 0.6,
                    symbolSize: 3,
                   // color: echarts.color.modifyHSL( "#FFFFFF", Math.round(hStep * 100))
                  },
                  zlevel: 1
                }
              ]
            };
            const myChart = echarts.init(
              document.getElementById("driver-live-map")
            );
            myChart.setOption(options, true);
            window.addEventListener("resize", function() {
              myChart.resize();
            });
          }
        },
        complete: function() {},
        error: function() {
          //请求出错处理
        }
      });
    },



    routeChart2: function(routeDeviceList) {
      var _this = this;

      $.ajax({
       // url: _this.global.deviceQueryDetail, //请求的url地址
          url:"http://47.99.119.140:8080/lbs/test",
        // contentType: "application/json",
          dataType: "json", //返回格式为json
       // data: { cellIdList: routeDeviceList.join(",") }, //参数值
        type: "GET", //请求方式
        beforeSend: function() {
          //请求前的处理
        },
        success: function(req) {
          req=JSON.parse(req);
          //  data={"code":"200","data":[["114.92773121376118","32.00899744124072"],["114.92709246626973","32.009173497941475"],["114.92779129249581","32.012655393067874"],["114.92796608936995","32.009176219560885"],["114.92810311796515","32.00746721099835"],["114.92782131246707","32.01012755341066"],["114.92803488201595","32.00860963575922"],["114.9277306144304","32.01097562614972"],["114.92830848114343","32.0071497147291"],["114.9278822546087","32.009540758308155"],["114.92825591092574","32.00695789907072"],["114.92765370725955","32.013582756756534"],["114.92732008316733","32.01674221865974"],["114.92600485705862","32.01767474159483"],["114.92716784125443","32.01770957734831"],["114.92813363232257","32.00883611334522"],["114.92791988081186","32.01111297663099"],["114.92747129869547","32.015293098017"],["114.92135087783832","32.017716684934605"],["114.92815703970724","32.00766908260723"],["114.92864648447366","32.000795064186825"],["114.91954730199386","32.01768466322609"],["114.92888433846372","31.99834508737331"],["114.92173838760641","32.01546114966846"],["114.92313713632888","32.013276147575105"],["114.92601952007517","32.01323190301334"],["114.92503896550839","32.01325524790608"],["114.91526231680074","32.017866045477064"],["114.91870355150832","32.01768481701685"],["114.93560843229169","31.982829813863663"],["114.93788428609375","31.980667595992198"],["114.93293129614322","31.985319474580574"],["114.92906794616212","31.99639437522837"],["114.94299875073814","31.975219634079256"],["114.94079052126038","31.977874255013266"],["114.9291754758877","31.99538973732277"],["114.9302462878376","31.98776010727289"],["114.92958947030795","31.99096313018736"],["114.98250344902895","31.95274583278496"],["114.98669874223314","31.947981755149808"],["114.94490179625026","31.972902312115338"],["114.95579857110049","31.964051009457346"],["114.9887586097376","31.94538145858378"],["114.95341942474298","31.965909192936063"],["114.95798894047773","31.96256189518409"],["114.962234786447","31.961311394267714"],["114.9735938524878","31.95850044940257"],["114.99351494693988","31.938410108094537"],["115.00287031699379","31.929007539118142"],["114.99767696862655","31.922485799822816"],["114.99470219965589","31.918427246205173"],["114.99657518603293","31.921298368459446"],["114.99026362763455","31.91181237160734"],["114.98944945359536","31.94436989809661"],["114.98873833180903","31.90786504571101"],["114.99986568069087","31.93274383028746"],["114.99333833456141","31.880812255095297"],["115.00569770692444","31.860375649885384"],["114.99791114920133","31.868363545031382"],["114.9989511020757","31.867072540947447"],["115.01602111838108","31.845368330466872"],["115.01274191120953","31.84623431018949"],["115.01471535829047","31.84605429492333"],["114.99381634064801","31.87919279194702"],["115.010368580901","31.85647534130247"],["115.01708139972737","31.842930647085087"],["115.02327169074071","31.840840052478885"],["115.04093785286685","31.824743463916057"],["115.02551758871591","31.839005491604777"],["115.02396923219317","31.84040137658037"],["115.04079912809554","31.82373465693124"],["115.02118666128419","31.841357198272103"],["115.04112432067781","31.82006941944539"],["115.0189165472121","31.84181229187193"],["115.03957985993662","31.808510119719383"],["115.03705684946503","31.804816346866513"],["115.0376691700307","31.805707121866863"],["115.0339284834528","31.80090368551226"],["115.03640708500359","31.80390654854332"],["115.04201143065728","31.8138988663624"],["115.03447230240303","31.80163035451251"],["115.03740158602433","31.805409544627498"],["115.035259278321","31.80251059617464"],["115.04118555076546","31.832078823121936"],["115.04149744860258","31.829756767848576"],["115.04046848070558","31.833018670416184"],["115.03426154896687","31.835875313037977"],["115.04129103325286","31.81821973770019"],["115.03639306112733","31.83510428606244"],["115.03954204168528","31.808549575711115"],["115.04134330696512","31.827411643677113"],["115.04121282833746","31.826410530150017"],["115.01696674306334","31.843399254439035"],["115.01226148110267","31.853211161782752"],["115.00361084863773","31.8623824591518"],["115.01126763016853","31.855808511717658"],["115.02563209134382","31.83902463778825"],["115.02055063357514","31.84153066748177"],["115.01498418459826","31.84597230223182"],["115.01056082579852","31.85645648483402"],["115.01870123900783","31.84193290920078"],["114.99638589069212","31.870793932722965"],["114.99286840397762","31.882333660831566"],["114.98920247304771","31.895861127941075"],["114.98828079431641","31.899232016947277"],["114.98775828603448","31.901185891789236"],["114.9925672762537","31.883464515460567"],["114.99499747034224","31.87480320806361"],["114.98753676487357","31.904400232389882"],["114.98747475357672","31.90331006358282"],["114.99481449097108","31.937036774859706"],["115.00008142186346","31.932568526501363"],["114.9842785532916","31.950834033764757"],["114.99554428805395","31.93636380194227"],["114.99088709427848","31.94245763716983"],["114.9862072487153","31.948662770058316"],["114.98977900748204","31.910644129345382"],["114.99755387081585","31.92234283793843"],["114.99474860613145","31.91849180911362"],["114.96368646755614","31.960968388956225"],["114.94475715758004","31.973118532768012"],["114.95169584471556","31.967467810266353"],["114.94792509757903","31.970444332379003"],["114.94039433344317","31.978366515576713"],["114.95373124690909","31.96585033380833"],["114.93452848989249","31.98392760922186"],["114.95920951233106","31.962110127491126"],["114.98248032089812","31.952834037806394"],["114.92197095233193","32.000880148741075"],["114.92961122713557","31.991358092966614"],["114.92532407188212","32.00109891654688"],["114.92983501297228","31.98838360605328"],["114.923893105702","32.00435316119607"],["114.92515449949752","32.005377625834335"],["114.92408328587048","32.004412846890354"],["114.92133069526751","32.00320385277789"],["114.92145184861394","32.00402123343359"],["114.92788226162901","32.010406303159286"],["114.9277834700902","32.01127458882013"],["114.92818008815543","32.00683378271088"],["114.91656455661901","32.01776019724018"],["114.91518624048092","32.017706475604555"],["114.91557464683467","32.01779261343343"],["114.92771469884495","32.012105129295136"],["114.92669793234398","32.00534551808867"],["114.92816569559967","32.00535099070802"],["114.92137340235386","32.00800164895361"],["114.92167007667561","32.01740174626019"],["114.92171570564894","32.01667369794803"],["114.92152541204644","32.011084647388735"],["114.92145684169063","32.00978314092349"],["114.9215779838172","32.01328980066423"],["114.92109973308298","32.01753529649222"],["114.91665546144283","32.0176609224356"],["114.92065488766201","32.000718140954504"],["114.921132451038","32.002926337598296"],["114.92135170303581","32.00752046923946"],["114.92116272406341","32.00382338154545"],["114.9212753823064","32.00594417559175"],["114.92112609692538","32.00188341513802"],["114.92121587491079","32.00354143332882"],["114.92126963819638","32.00405255545854"],["114.92131391089289","32.00463625143625"],["114.92067490201593","32.02110742960243"],["114.92079656594251","32.021139846287895"],["114.92674293196279","32.02036515654888"],["114.92133631541702","32.00572009513305"],["114.92433242985632","32.020665196702446"],["114.92246963785227","32.02088003671295"],["114.9248576103071","32.02062109785726"],["114.92154060620392","32.00988321531639"],["114.92186033419468","32.017053726006765"],["114.92706096734365","32.013279994531274"],["114.92740357880766","32.01416951960345"],["114.92691696321836","32.019605066219754"],["114.92156282944924","32.01343066063732"],["114.91896941151174","32.01358587394478"],["114.9274484691427","32.01357211472979"],["114.92416361995383","32.01342005757493"],["114.92705419555725","32.0181694726904"],["114.92224800280574","32.01343471630788"],["114.91568124288042","32.01384329227886"],["114.91350308674613","32.0139642248072"],["114.91498752854142","32.01389090068007"],["114.9139820767792","32.01393349273325"],["114.91258144250453","32.015053506182625"],["114.918307046489","32.01363141116391"],["114.91259660764551","32.01513252922385"],["114.91256547045836","32.01483125137327"],["114.91274123454056","32.01518733117787"],["114.91686895149881","32.017735861264526"],["114.92036169776432","32.01759896279111"],["114.92151061418382","32.0175597510935"],["114.91363198707471","32.01385818277673"],["114.9193034047502","32.013509553062754"],["114.91312181239311","32.01389185749623"],["114.91769058203181","32.01360993148097"],["114.92171543790059","32.01470212546944"],["114.92166168076876","32.014220483687595"],["114.92013445721918","32.021135663191046"]],"success":true};
          var lineArr = [];
          if (req.code == "200") {
            console.log(req.data.data.length);
            for (var x = 0; x < req.data.data.length; x++) {
              if (req.data.data[x].length > 10) {
                lineArr.push(req.data.data[x]);
              }
            }
            // lineArr.push(req.data.data[0]);

            var hStep = 300 / (lineArr.length - 1);
            var busLines = lineArr.map(function(busLine, idx) {
              return {
                coords: busLine,
                lineStyle: {
                  normal: {
                    //   color: echarts.color.modifyHSL('#5A94DF')
                    color: echarts.color.modifyHSL(
                      "#5A94DF",
                      Math.round(hStep * idx)
                    ),
                    width: 0.5,
                    opacity: 0.1
                  }
                }
              };
            });

            var options = {
              animation: false,
              bmap: {
                center: ["114.0832947235837", "32.16857465070465"],
                zoom: 12,
                roam: true,
                mapStyle: {
                  styleJson: _this.styleJson
                }
              },
              series: [
                {
                  type: "lines",
                  coordinateSystem: "bmap",
                  polyline: true,
                  data: busLines,
                  silent: true,
                  lineStyle: {
                    normal: {
                      // color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx)),
                      // color: '#c23531',
                      // color: 'rgb(200, 35, 45)',
                      opacity: 0.1,
                      width: 1
                    }
                  },
                  progressiveThreshold: 500,
                  progressive: 200
                },
                {
                  type: "lines",
                  coordinateSystem: "bmap",
                  polyline: true,
                  data: busLines,
                  lineStyle: {
                    normal: {
                      width: 0
                    }
                  },
                  effect: {
                    constantSpeed: 30,
                    show: true,
                    trailLength: 0.6,
                    symbolSize: 3,
                 //   color: echarts.color.modifyHSL("#5A94DF", Math.round(hStep * 10) )
                  },
                  zlevel: 1
                }
              ]
            };
            const myChart = echarts.init(
              document.getElementById("driver-live-map")
            );
            myChart.setOption(options, true);
            window.addEventListener("resize", function() {
              myChart.resize();
            });
          }
        },
        complete: function() {},
        error: function() {
          //请求出错处理
        }
      });
    },
    /* ***************从后台读取设备点的信息end**************   */
    ready: function() {}
  },

  mounted: function() {
    this.appKey = JSON.parse(localStorage.getItem("userInfo")).appKey;
    this.getDiviceInfo();
    // this.routeChart();
  },
  destroyed: function() {
    //页面销毁
    window.clearInterval(this.taskOfAddMarket);
  }
};
</script>


